<template>
  <el-dialog
    title="上传文件"
    v-model="dialogVisible"
    width="600px"
  >
    <el-form :model="form" label-width="80px">
      <el-form-item label="版本">
        <el-input v-model="form.version" placeholder="请输入版本号"></el-input>
      </el-form-item>

      <el-form-item label="目录">
        <el-upload
          class="upload-demo"
          action="#"
          :auto-upload="false"
          :on-change="handleFileChange"
        >
          <template #trigger>
            <el-button type="primary">选择文件</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip">{{ form.fileName || '未选择文件' }}</div>
          </template>
        </el-upload>
      </el-form-item>

      <el-form-item label="文件类型">
        <el-select v-model="form.fileType" placeholder="请选择文件类型">
          <el-option
            v-for="project in projects"
            :key="project.id"
            :label="project.name"
            :value="project.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- 依赖列表 -->
      <el-form-item label="依赖">
        <div v-for="(dep, index) in form.dependencies" :key="index" class="dependency-item">
          <el-select v-model="dep.type" placeholder="选择类型" style="width: 140px; margin-right: 10px">
            <el-option
              v-for="project in projects"
              :key="project.id"
              :label="project.name"
              :value="project.id"
            ></el-option>
          </el-select>
          <el-select v-model="dep.version" placeholder="选择版本" style="width: 140px; margin-right: 10px">
            <el-option
              v-for="ver in mockVersions"
              :key="ver"
              :label="ver"
              :value="ver"
            ></el-option>
          </el-select>
          <el-button 
            v-if="index === form.dependencies.length - 1" 
            type="primary" 
            @click="addDependency"
          >
            <el-icon><Plus /></el-icon>
          </el-button>
          <el-button 
            v-else 
            type="danger" 
            @click="removeDependency(index)"
          >
            <el-icon><Minus /></el-icon>
          </el-button>
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch, onMounted } from 'vue';
import { mockProjects } from '@/mock/projectData';
import { Plus, Minus } from '@element-plus/icons-vue'  // 导入图标

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  defaultProjectId: {
    type: Number,
    default: null
  }
});

const emit = defineEmits(['update:visible', 'submit']);

// 模拟版本数据
const mockVersions = ['1.0', '1.1', '1.2', '1.9', '2.0'];

const dialogVisible = ref(props.visible);
const projects = ref(mockProjects);

const form = ref({
  version: '',
  fileName: '',
  fileType: '',
  file: null,
  dependencies: [
    { type: '', version: '' }  // 初始依赖项
  ]
});

// 监听visible变化
watch(() => props.visible, (val) => {
  dialogVisible.value = val;
});

// 监听对话框关闭
watch(dialogVisible, (val) => {
  emit('update:visible', val);
  if (!val) {
    resetForm();
  }
});

// 监听defaultProjectId变化并设置默认文件类型
watch(() => props.defaultProjectId, (val) => {
  if (val) {
    form.value.fileType = val;
  }
}, { immediate: true });

// 添加依赖
const addDependency = () => {
  form.value.dependencies.push({ type: '', version: '' });
};

// 删除依赖
const removeDependency = (index) => {
  form.value.dependencies.splice(index, 1);
};

// 处理文件选择
const handleFileChange = (file) => {
  form.value.fileName = file.name;
  form.value.file = file.raw;
};

// 提交表单
const handleSubmit = () => {
  // 过滤掉空依赖项
  const validDependencies = form.value.dependencies.filter(dep => dep.type && dep.version);
  
  const submitData = {
    ...form.value,
    dependencies: validDependencies
  };
  
  emit('submit', submitData);
  dialogVisible.value = false;
};

// 重置表单
const resetForm = () => {
  form.value = {
    version: '',
    fileName: '',
    fileType: props.defaultProjectId || '',
    file: null,
    dependencies: [{ type: '', version: '' }]
  };
};

// 组件挂载时设置默认值
onMounted(() => {
  if (props.defaultProjectId) {
    form.value.fileType = props.defaultProjectId;
  }
});
</script>

<style scoped>
.dependency-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.el-upload__tip {
  margin-top: 8px;
  color: #666;
}
</style> 